<template>
    <pageLayoutContent class="data-info">
        <div class="data-info-user">
            <a-card :loading="loading" class="data-info-user-card">
                <p class="data-info-user-card-title">
                    基本信息
                    <a-button icon="edit" type="link" @click="editUser">
                        编辑
                    </a-button>
                </p>
                <div class="data-info-user-card-item"
                     v-for="(prop, index) in basicProp"
                     :key="index">
                    <span>{{prop.label}}</span>
                    {{prop.value}}
                </div>
            </a-card>
            <a-card :loading="loading" class="data-info-user-card">
                <p class="data-info-user-card-title">
                    <span>
                        紧急联系人
                    <i>最多可添加5人</i>
                </span>
                    <a-button icon="plus-circle"
                              @click="addContact"
                              :disabled="contactList.length >= 5"
                              type="link">
                        添加
                    </a-button>
                </p>
                <div class="data-info-user-card-item"
                     v-for="(contact, index) in contactList"
                     :key="index">
                    <template v-if="contact.edit">
                        <a-input-group style="width: 100%;margin: 10px 0 0 0;">
                            <a-row :gutter="2">
                                <a-col :span="6">
                                    <a-input v-model="contact.name"/>
                                </a-col>
                                <a-col :span="12">
                                    <a-input v-model="contact.phone"/>
                                </a-col>
                                <a-col :span="6" class="addcontact-btn">
                                    <a-button type="link"
                                              @click="saveContact(contact, index)"
                                              style="padding: 0 7px;margin-left: 10px;">
                                        <a-icon type="check" />
                                    </a-button>
                                    <a-button type="link" style="padding: 0 7px;" @click="contactList.splice(index, 1)">
                                        <a-icon type="close" :style="{color: '#999'}"/>
                                    </a-button>
                                </a-col>
                            </a-row>
                        </a-input-group>
                    </template>
                    <template v-else>
                        <span>{{contact.name}}</span>
                        {{contact.phone}}
                    </template>
                </div>
                <a-empty
                        v-if="!contactList.length"
                        :description="false"
                        :image-style="{
                          height: '60px',
                          marginTop: '20px'
                        }"/>
            </a-card>
            <a-card :loading="loading" class="data-info-user-card">
                <p class="data-info-user-card-title">
                    <span>
                        设备信息
                </span>
                    <a-button icon="disconnect" @click="removeBinding" type="link">
                        解除绑定
                    </a-button>
                </p>
                <div class="data-info-user-card-item"
                     v-for="(prop, index) in equipment"
                     :key="index">
                    <span>{{prop.label}}</span>
                    {{prop.value}}
                </div>
            </a-card>
            <a-card :loading="loading" class="data-info-user-card no-border">
                <p class="data-info-user-card-title">
                    <span>关注人</span>
                </p>
                <a-list size="small" item-layout="vertical" :pagination="peoplePagination" :data-source="people">
                    <a-list-item slot="renderItem" key="item.bdTime" slot-scope="item">
                        <div class="people-item">
                            <div>
                                <p>{{item.relationship}} <kIcon type="iconguanliyuan"/></p>
                                <p>{{item.phone}}</p>
                            </div>
                            <div>
                                <p>绑定时间</p>
                                <p>{{item.bdTime}}</p>
                            </div>
                        </div>
                    </a-list-item>
                </a-list>
            </a-card>
        </div>
        <div class="data-info-tab">
            <a-tabs :default-active-key="defaultKey" class="data-info-tab-content">
                <a-tab-pane key="1" tab="体征数据" class="12312">
                    <signsData/>
                </a-tab-pane>
                <a-tab-pane key="2" tab="活动轨迹" force-render>
                    <trajectoryMap/>
                </a-tab-pane>
                <a-tab-pane key="3" tab="报警记录">
                    <alarmRecord/>
                </a-tab-pane>
                <a-tab-pane key="4" tab="日志">
                    <logging class="tab-logging"/>
                </a-tab-pane>
            </a-tabs>
        </div>
        <modelForm :width="405" ref="userForm" :formConfig="userFormConfig" :confirm="userConfirm"/>
    </pageLayoutContent>
</template>

<script>
    import logging from "./logging";
    import {userInfo} from "@/services/monitoring";
    import kIcon from '@/utils/k-icon';
    import pageLayoutContent from "@/components/pageLayoutContent";
    import signsData from './signsData';
    import trajectoryMap from "./trajectoryMap";
    import alarmRecord from './alarmRecord';
    import modelForm from '@/components/modelForm';
    // mock
    import {institutions} from "../../../mock/mockData";

    console.log(institutions);
    const userFormConfig = [
        {label: '真实姓名', prop: 'raelname', rules: []},
        {label: '性别', prop: 'gender', rules: []},
        {label: '联系电话',  prop: 'phone', rules: []},
        {label: '出生日期', type: 'date', prop: 'birth', rules: []},
        {label: '所属机构', type: 'treeSelect', options: institutions, prop: 'company', rules: []},
    ]
    export default {
        name: "index",
        components: {
            pageLayoutContent,
            alarmRecord,
            logging,
            kIcon,
            signsData,
            modelForm,
            trajectoryMap
        },
        data() {
            return {
                userFormConfig,
                loading: false,
                basicProp: [
                    {label: '真实姓名', prop: 'raelname'},
                    {label: '性别', prop: 'gender'},
                    {label: '联系电话', prop: 'phone'},
                    {label: '出生日期', prop: 'birth'},
                    {label: '所属机构', prop: 'company'},
                ],
                contactList: [],
                equipment: [
                    {label: '设备型号', prop: 'model'},
                    {label: '设备IMEI', prop: 'imei'},
                    {label: '绑定时间', prop: 'bdTime'},
                ],

                people: [],
                defaultKey: '1'
            }
        },
        computed: {
            peoplePagination() {
                return this.people.length > 2 ?
                    {

                        onChange: page => {
                            console.log(page);
                        },
                        pageSize: 2,
                        size: 'small'
                    } :  false
            }
        },
        created() {
            if (this.$route.query.tab) {
                this.defaultKey = this.$route.query.tab + '';
            }
            this.loading = true;
            userInfo().then(({data}) => {
                this.basicProp = this.basicProp.map(value => {
                    value['value'] = data.info[value.prop];
                    return value;
                })
                this.equipment = this.equipment.map(value => {
                    value['value'] = data.equipment[value.prop];
                    return value;
                })
                this.people = data.people;
                this.contactList = data.contact;
                this.loading = false;
            })
        },
        methods: {
            saveContact({name, phone}, index) {
                const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
                if (name && reg.test(phone)) {
                    this.contactList[index].edit = false;
                } else {
                    let msg = name === '' ? '请输入姓名' : '请输入正确的手机号';
                    this.$message.warning(msg);
                }
            },
            addContact() {
                this.contactList.push({
                    edit: true,
                    name: '',
                    phone: '',
                })
            },
            removeBinding() {
                this.$confirm({
                        title: '确定解除绑定设备?',
                        content: '请谨慎操作',
                        centered: true,
                        okText: '解除绑定',
                        okType: 'danger',
                        cancelText: '取消',
                        onOk() {
                            return new Promise((resolve, reject) => {
                                setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                            }).catch(() => console.log('Oops errors!'));
                        },
                        onCancel() {
                        },
                })
            },
            editUser() {
                let data = {};
                this.basicProp.forEach(value => {
                    data[value.prop] = value['value'];
                })
                this.$refs['userForm'].showModel({title: '编辑', data});
            },
            userConfirm(data, callback) {
                console.log(data);
                setTimeout(() => {
                    this.$message.success('操作成功')
                    callback()
                }, 2000);
            }
        }
    }
</script>

<style lang="less">
.data-info{
    display: flex;
    &-user{
        width:365px ;
        min-width: 365px;
        background: #f9fdff;
    }
    &-tab{
        flex: 1;
        background: #fff;
        margin-left: 7px;
        padding: 0 15px;
        box-sizing: border-box;
        overflow: hidden;
        height: inherit;
        &-content{
            height: 100%;
            display: flex;
            flex-direction: column;
            .ant-tabs-content{
                flex: 1;
            }
        }
        &-sign{
            height: inherit;
            display: flex;
            flex-direction: column;
            &-content{
                height: 158px;
                border-top: 1px #e8e8e8 dashed;
                box-sizing: border-box;
                margin-top: 20px;
                p{
                    font-size: 16px;
                    color: #000;
                    padding: 12px 0 0 12px;
                    margin: 0;
                    i{
                        font-size: 14px;
                    }
                }
                div p{
                    font-size: 14px;
                    color: #505050;
                    margin: 0;
                    padding: 5px 0 0 10px;
                }
                div p span{
                    display: inline-block;
                    width: 55px;
                    text-align: left;
                }
            }
        }
        .tab-record, .tab-logging{
            height: calc(100vh - 155px);
            display: flex;
            flex-direction: column;
        }
        &-events{
            height: calc(100vh - 155px);
            display: flex;
            flex-direction: column;
            &-timeline{
                height: 267px;
                overflow: auto;
                padding: 10px;
            }
        }
    }
}
.one-title{
    display: flex;
    justify-content: space-between;
}
</style>
<style lang="less">
    .no-border{
        .ant-card-body{
            border: none!important;
        }
    }
    .addcontact-btn{
        button:hover{
            opacity: .6;
        }
    }
    .people-item{
        display: flex;
        justify-content: space-between;
        div:first-child{
            p{
                padding: 0;
                margin: 0;
                color: #505050;
                font-size: 14px;
                &:first-child{
                    font-size: 16px;
                    i{
                        color: #1890ff;
                    }
                }
            }
        }
        div:last-child{
            p{
                padding: 0;
                margin: 0;
                color: #999999;
                font-size: 14px;
            }
        }
    }
    .data-info-user-card{
            background: transparent!important;
            border: none!important;
        .ant-card-body{
            padding: 10px 0 15px 0!important;
            margin: 0 14px 0 24px!important;
            border-bottom: 1px #e8e8e8 solid;
            min-height: 160px;
        }
        &-title{
            display: flex;
            justify-content: space-between;
            padding: 0;
            margin: 0;
            font-size: 16px;
            button{
                padding: 0;
                font-size: 12px;
            }
            span i{
                color: rgba(153, 153, 153, 1);
                font-size: 12px;
                font-style: normal;
            }
        }
        &-item{
            font-size: 14px;
            color: #505050;
            display: flex;

            align-items: center;
            justify-content: flex-start;
            margin: 7px 0;
            span{
                margin-right: 22px;
                width: 56px;
                display: inline-block;
                color: #999999;
                text-align-last: justify;
            }
        }
    }
</style>
